<template>
<!-- 	<view>
		地址管理页面
	</view> -->
	<view class="box">
		<view class="items" v-for="item in AllAddress" :key="item.id"  @tap="select(item)">
			<view class="left">
				<view class="title">
					<view class="cname">{{item.name}}</view>
					<view class="default" v-if="item.defaultStatus">默认</view>
				</view>
				<view class="photo">{{item.phoneNumber}}</view>
			</view>
			<view class="right" @click="goaddress(item.id)">
				<image src="../../../static/icons/edit.png" mode=""></image>
			</view>
		</view>
		<view class="btn" @click="goaddres">新增地址</view>
	</view>
</template>

<script>
	import {findAllAddress} from "../../../api/mine/address/index.js"
	import mix from "@/mixins/index.js"
	export default {
		mixins:[mix],
		data() {
			return {
				isSelect: false,
				AllAddress:[],
			};
		},
		methods:{
			//跳转到修改地址页面
			goaddress(key){
				console.log(key)
				uni.navigateTo({
					url:`./address/address?id=${key}`
				})
			},
			//新增地址页面
			goaddres(){
				uni.navigateTo({
					url:"./address/address"
				})
			},
			init(){
				findAllAddress().then(res=>{
					console.log(res)
					this.AllAddress=res.data.items
				})
			},
			//是否需要返回地址
			select(row){
				console.log(row)
				if(!this.isSelect){
					return
				};
				uni.setStorageSync("selectAddress",row);
				uni.navigateBack({
					delta:1
				})
			}
		},
		onShow(){
			this.checkLogins(this.init);
		},
		onLoad(e){
			console.log(e)
			if(e.type=="select"){
				this.isSelect=true;
			}
		},
	}
</script>

<style lang="scss" scoped>
.box{
	width: 100%;
	height: 100vh;
	background-color:#F1ECE7;
	.items{
		width: 94%;
		padding: 10px 0;
		border-bottom: 1Px solid #ccc;
		margin: 0 auto;
		display: flex;
		font-size: 14px;
		.left{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			.title{
				margin-left: 15px;
				margin-bottom: 10px;
				display: flex;
				.default{
					font-size: 11px;
					background-color: #354e44;
					color: #fff;
					padding: 0 9px;
					border-radius: 4px;
					margin-left: 10px;
				}
			}
			.photo{
				margin-left: 15px;
			}
		}
		.right{
			// align-items: center;
			width: 40px;
			height: 30px;
			border-left: solid 1px #aaa;
			font-size: 20px;
			color: #777;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 20px;
				height: 20px;
			}
		}
	}
	.btn{
		position: fixed;
		bottom:10px;
		left:35px;
		width: 300px;
		height: 50px;
		border-radius: 60px;
		background: rgb(53, 78, 68);
		color: rgb(255, 255, 255);
		text-align: center;
		line-height:50px;
		
	}
}
</style>
